<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p ref="msgRef">{{ message }}</p>
  <button @click="changeMsg">更改 message</button>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch, watchEffect } from "vue";
const message = ref("小猪课堂");
const msgRef = ref<any>(null);
const changeMsg = () => {
  message.value = message.value === '小猪课堂' ? '斯' : '小猪课堂'
};
const getData = () => {
  return new Promise((resolve, _) => {
    setTimeout(() => {
      resolve([{ num: 1, id: '0001' }, { num: 2, id: '0002' }])
    }, 1000);
  })
}
console.log('其他人改的代码！')
watch(message, async (newValue, oldValue, onCleanup) => {
  const timer = setInterval(() => console.log(newValue), 1000)
  onCleanup(() => clearInterval(timer)) // ← 这个回调就是清洁工
});
</script>